<template>
    <div class="login-body">
        <div class="wrapper">
            <!-- nav 是语义化标签 -->
            <nav><a href="javascript:;">账号登录</a><a href="javascript:;"></a>扫码登录</nav>
            <div class="account-box">
                <div class="toggle">
                    <a href="javascript:;"><i class="iconfont icon-comment"></i>使用短信登录</a>
                </div>

                <!-- 表单 -->
                <form class="form" action="">
                    <div class="form-item">
                        <div class="input">
                            <i class="iconfont icon-icon-user"></i>
                            <input type="text" :class="{active:validate.account}" v-model="account"/>
                            <div class="error" v-if="!validate.account">请输入用户名</div>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="input">
                            <i class="iconfont icon-jiesuo"></i>
                            <input type="password" :class="{active:validate.password}" v-model="password"/>
                        </div>
                        <div class="error" v-if="!validate.password">请输入密码</div>
                    </div>

                    <div class="form-item">
						<div class="agree">
							<div class="xtx-checked" :style="validate.isChecked ? 'color: #27ba9b' : ''">
								<i class="iconfont" :class="ico" @click="changChecked"></i>
								<span>我已同意</span>
								<a href="javascript:;">《隐私条款》</a>
								<span>和</span>
								<a href="javascript:;">《服务条款》</a>
							</div>
							<div class="error" v-if="!validate.isChecked">请阅读并同意条款</div>
						</div>
					</div>
					<a href="javascript:;" @click="login" class="btn">立即登录</a>
                </form>
                <div class="action">
					<a
						href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback">
						<img
							src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
							alt="" />
					</a>
					<div class="url">
						<a href="">忘记密码</a><router-link to="/register">免费注册</router-link>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/login';
import { saveToken,saveUserInfo } from '@/utils/userInfo';
export default{
    name:'LoginBody',
    data(){
        return{
            account:'xiaotuxian001',
            password:'123456',
            ico: 'icon-duoxuanxuanzhong',
			validate: {
				account: false,
				password: false,
				isChecked: true,
			},
        }
    },
    watch:{
        account:{
            immediate:true,
            handler(newVal){
                if(newVal) return (this.validate.account = true)

                this.validate.account=false
            }
        },
        password:{
            immediate:true,
            handler(newVal){
                if(newVal) return (this.validate.password = true)

                this.validate.password=false
            }
        }
    },

    methods:{
        // 登录
        login(){
            if(Object.values(this.validate).includes(false)){
                this.$message({
					message: '警告信息！请确保信息填写完整',
					type: 'warning',
				});
            }else{
                let data ={
                    account:this.account,
                    password:this.password
                }
                login(data).then(
                    data=>{
                        this.$message(
                            {
                                message:'登录成功',
                                type:'success'
                            }
                        )

                        saveToken(data.data.result.token);
                        // 将对象转为string，也就是序列化
                        saveUserInfo(JSON.stringify(data.data.result));

                        //向store存数据
                        this.$store.commit('user/setToken',data.data.result.token);
                        this.$store.commit('user/setUserInfo',data.data.result);

                        
                        this.$store.dispatch('cart/getCartDataList');
                        this.$router.push('/home');

                    },error=>{
                        this.$message({
							message: error.response.data.message,
							type: 'error',
						});
					}
                )
            }
           
        },
        changChecked(){
           
        if (this.validate.isChecked) {
				this.validate.isChecked = false;
				this.ico = 'icon-duoxuanweixuanzhong';
			} else {
				this.validate.isChecked = true;
				this.ico = 'icon-duoxuanxuanzhong';
			}
        }
    }
}
</script>


<style lang="less" scoped>
.active {
	border-color: #27ba9b !important;
}
.login-body {
	background: url(../../../assets/images/login-bg.png) no-repeat 50% / cover;
	height: 488px;
	position: relative;
	.wrapper {
		width: 380px;
		background: #fff;
		min-height: 400px;
		position: absolute;
		left: 50%;
		top: 54px;
		transform: translate3d(100px, 0, 0);
		box-shadow: 0 0 10px rgb(0 0 0 / 15%);
		nav {
			height: 55px;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			padding: 0 40px;
			text-align: right;
			align-items: center;
			a {
				flex: 1;
				line-height: 1;
				display: inline-block;
				font-size: 18px;
				position: relative;
				text-align: center;
				.active {
					color: #27ba9b;
					font-weight: 700;
				}
			}
		}
		.account-box {
			.toggle {
				padding: 15px 40px;
				text-align: right;
				a {
					color: #27ba9b;
					i {
						font-size: 14px;
					}
				}
			}
			.form {
				padding: 0 40px;
				.form-item {
					margin-bottom: 28px;
					.input {
						position: relative;
						height: 36px;
						i {
							width: 34px;
							height: 34px;
							position: absolute;
							text-align: center;
							line-height: 34px;
							font-size: 24px;
						}
						input {
							padding-left: 44px;
							border: 1px solid #cfcdcd;
							height: 36px;
							line-height: 36px;
							width: 100%;
						}
					}
					.xtx-checked {
						i {
							cursor: pointer;
						}
					}
				}
				.btn {
					display: block;
					width: 100%;
					height: 40px;
					color: #fff;
					text-align: center;
					line-height: 40px;
					background: #27ba9b;
				}
				.error {
					position: absolute;
					font-size: 14px;
					line-height: 28px;
					color: #cf4444;
				}
			}
			.action {
				padding: 20px 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.url {
					a {
						margin-left: 10px;
					}
				}
				a {
					color: #999;
				}
			}
		}
	}
}
</style>
